<template>
  <view class="product-page">
        <CustomNavBar title="" :placeholder="false"
      backgroundColor="transparent"
      titleColor="#fff" />


    <!-- 顶部轮播图 -->
    <view class="swiper-container">
      <swiper class="product-swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(image, index) in productImages" :key="index">
          <image class="swiper-image" :src="image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品主要信息 -->
    <view class="product-info">
      <view class="price-section">
        <view class="price-group">
          <text class="current-price">¥{{ activityInfo.firstPrice }}</text>
          <text class="original-price">¥{{ activityInfo.price }}</text>
        </view>
        <view class="discount-tag">
          <text class="discount-text">{{ productInfo.quantity }}人已付款</text>
        </view>
      </view>
      <view class="product-name">{{ productInfo.name }}</view>
      <view class="product-desc">适配全系车型 / 枪线3.5米/ 每位车主限购一台</view>
      <view class="product-notice">
        <text class="notice-text">超30米线缆每米只按40元收取基础成本费，如需立柱或吊柱每个仅收取采购成本150元</text>
      </view>
    </view>

    <!-- 服务保障 -->
    <view class="free-install-section">
      <view class="install-badge">
        <image class="install-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/product/ico_anzhuang.png" />
        <text class="install-text">免费安装</text>
      </view>
      <view class="quality-badge">
        <image class="quality-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/product/ico_zhiliang.png" />
        <text class="quality-text">质量保证</text>
      </view>
      <view class="speed-badge">
        <image class="speed-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/product/ico_jisu.png" />
        <text class="speed-text">极速发货</text>
      </view>
    </view>

    <!-- 装维信息 -->
    <view class="install-info-section">
      <view class="info-row">
        <view class="info-item">
          <text class="info-label">可选</text>
          <view class="info-options">
            <view class="option-btn active">
              <text class="option-text">立式</text>
              <view class="option-inner">
                <text class="option-inner-text">壁挂</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="info-row">
        <view class="info-item">
          <text class="info-label">运费</text>
          <text class="info-value">免运费</text>
        </view>
      </view>
      <view class="info-row">
        <view class="info-item">
          <text class="info-label">服务</text>
          <text class="info-value">专业安装</text>
        </view>
      </view>
    </view>

    <!-- 商品权益数据介绍 -->
    <view class="benefits-section">
      <image class="benefits-bg" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/product/bg9.png" mode="aspectFill" />
      <view class="benefits-content">
        <view class="benefit-title">
          <text class="benefit-main-title">购买听鸽共享充电桩</text>
          <image class="title-image" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/FONT.png" mode="aspectFit" />
        </view>
        <view class="benefit-list">
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">1</text>
            </view>
            <text class="benefit-text">价值2000元的运营版充电桩一台（五年免费换新）</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">2</text>
            </view>
            <text class="benefit-text">5年内充电服务费收入约16000元</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">3</text>
            </view>
            <text class="benefit-text">1000元充电服务费抵扣券</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">4</text>
            </view>
            <text class="benefit-text">1000元洗车券</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">5</text>
            </view>
            <text class="benefit-text">5000元新能源汽车消费券</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">6</text>
            </view>
            <text class="benefit-text">约1万元共享充电桩推荐现金奖励</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">7</text>
            </view>
            <text class="benefit-text">充电服务费推荐奖励 10% ~ 20%，最高可达43200元</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">8</text>
            </view>
            <text class="benefit-text">获得充电免服务费</text>
          </view>
          <view class="benefit-item">
            <view class="benefit-number">
              <text class="number-text">9</text>
            </view>
            <text class="benefit-text">免费安装及运维</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 计划安装位置 -->
    <view class="location-section">
      <view class="location-title">
        <text class="location-title-text">计划安装位置</text>
      </view>
      <view class="location-content">
        <view class="location-info flex-col">
          <mini-map-locate ref="mapRef" :center="mapCenter" class="map-component"></mini-map-locate>
<!--         <image
              class="location-icon"
              referrerpolicy="no-referrer"
              src="@/static/images/activity_pile/ico_location.png"
          /> -->
          <view class="location-text-wrapper">
            <text class="location-text"  v-if="plotId === null || plotId === 0 || plotId === '0'">当前定位附近无小区</text>
            <text class="location-text" v-else>当前位置：{{ currentLocationName }}-仅剩{{ remainingQuota }}个名额</text>
          </view>
        </view>
        <view class="location-action">
          <view class="location-link-container">
            <text class="location-limit">每个小区限前{{quota}}名可以购买</text>
            <view class="location-right" @click="goToPlotSearch">
              <text class="location-link">查看其他可购买位置</text>
              <image
                  class="location-arrow"
                  referrerpolicy="no-referrer"
                  src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/ico_arrow.png"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部间距，避免被悬浮按钮遮挡 -->
    <view class="bottom-spacer"></view>
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-action">
     <view class="agreement-section">
      <view class="agreement-checkbox" @click="toggleAgreement">
        <checkbox-group @change="onAgreementChange">
          <checkbox 
            :checked="isAgreed" 
            color="#1CCCB4"
            @click="toggleAgreement"
          />
        </checkbox-group>
        <text class="agreement-text">我已阅读并同意</text>
        <text class="agreement-link" @click.stop="viewAgreement">《听鸽共享充电桩购买协议》</text>
      </view>
    </view>
    <view 
      class="confirm-button" 
      :class="{ disabled: !isAgreed }"
      @click="confirmPurchase"
    >
      <text class="confirm-text">立即购买</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'
import { onLoad as onPageLoad } from '@dcloudio/uni-app'
import ActivityApi from '@/api/pile/activity.js'
import PaymentApi from '@/api/pile/payment.js'
import PaymentUtil from '@/utils/payment.js'
import LoginUtils from '@/utils/loginUtils.js'
import PileApi from '@/api/pile/pile.js'
import MiniMapLocate from '@/components/mini-map-locate.vue';
import CustomNavBar from '@/components/CustomNavBar.vue'

const productId = ref(null)
const activityId = ref(null)
const plotId = ref(null)
const areaId = ref(null)
const quota = ref(null)
const quantity = ref(null)
const currentLocationName = ref('')
const remainingQuota = ref(0)
const activityInfo = reactive({})
const productInfo = reactive({})
const mapRef = ref(null);
const productImages = ref([
  // '/static/images/product/bg_more.png',
])
const isAgreed = ref(false)
const mapCenter = ref({})

onPageLoad(async (options) => {
  // 接收页面参数
  console.log('产品页面参数:', options)
  productId.value = options.productId ? options.productId : 1


  activityId.value = options.activityId
  // 接收plotId、areaId、quota和quantity参数
  plotId.value = options.plotId ? Number(options.plotId) : null
  areaId.value = options.areaId || null
  quota.value = options.quota || null
  quantity.value = options.quantity || null

  loadProductData()


  let plotFlag = !plotId.value || plotId.value === 0;

  // 设置当前位置名称和剩余名额
  if (!plotFlag && options.currentLocationName) {
    currentLocationName.value = decodeURIComponent(options.currentLocationName)
  }
  if (options.quota && options.quantity) {
    remainingQuota.value = parseInt(options.quota) - parseInt(options.quantity)
  }

  // 接收并处理经纬度参数，用于地图定位
  if (options.latitude && options.longitude) {
    const latitude = parseFloat(options.latitude)
    const longitude = parseFloat(options.longitude)
    console.log('接收到的经纬度参数:', { latitude, longitude })

    // 立即设置mapCenter，确保地图组件初始化时就有正确的坐标
    mapCenter.value = { latitude: latitude, longitude: longitude }
    console.log('已设置mapCenter:', mapCenter.value)

    // 延迟调用setLocation作为备用，确保地图位置正确
    setTimeout(() => {
      if (mapRef.value && mapRef.value.setLocation) {
        mapRef.value.setLocation(latitude, longitude)
        console.log('已调用setLocation设置地图位置:', { latitude, longitude })
      }
    }, 1000)
  }

  console.log('接收到的小区参数:', { plotId: plotId.value, areaId: areaId.value, quota: quota.value, quantity: quantity.value, currentLocationName: currentLocationName.value, remainingQuota: remainingQuota.value })


  //未选择 或者 已经获取到限购 不需要查询
  if (plotId.value === 0 || quota.value !== null) {
    return false;
  }
  await getPlotLimitInfo(currentLocationName.value)
    
})

const loadProductData = async () => {
  try {
    // 并行调用两个接口
    const [activityResult, productResult] = await Promise.all([
      ActivityApi.getActivityInfo(activityId.value),
      ActivityApi.getActivityProduct(productId.value)
    ])
    Object.assign(activityInfo, activityResult || {})
    Object.assign(productInfo, productResult || {})

    productImages.value = productResult.image.split(',')
    
    console.log('活动信息:', activityInfo)
    console.log('产品信息:', productInfo)
  } catch (error) {
    console.error('加载产品数据失败:', error)
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  }
}

const onAgreementChange = (e) => {
  isAgreed.value = !isAgreed.value
}

const toggleAgreement = () => {
  isAgreed.value = !isAgreed.value
}

const viewAgreement = () => {
  // 跳转到购买协议页面
  uni.navigateTo({
    url: '/pages/activity/agreement'
  })
}

const confirmPurchase = async () => {
  // console.log('confirmPurchase called, isAgreed:', isAgreed.value)
    if (!submitCheck()) {
      return
    }

    // 先调用PaymentApi获取支付参数
    uni.showLoading({
      title: '正在发起支付...'
    });




    try{
      // 使用传递的plotId和areaId，如果没有则使用默认值
      const finalPlotId = plotId.value;
      const finalAreaId = areaId.value;
      console.log('使用的plotId和areaId:', { plotId: finalPlotId, areaId: finalAreaId });
      
      const data = await PaymentApi.createPayment(
        activityId.value,
        productId.value,
        finalPlotId, // 使用传递的plotId或默认值
        finalAreaId, // 使用传递的areaId或默认值
        LoginUtils.getChannel(),
        1
      );

      // 使用封装的支付工具
      const callbacks = {
        onSuccess: (payRes) => {
          console.log('支付成功:', payRes);
          // 支付成功后跳转到shared-pile/index页面，携带状态=1
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/activity/shared-pile/index?pileStatus=1'
            })
          }, 1000)
        },
        onFail: (error) => {
          console.log('支付失败:', error);
          // 支付失败处理逻辑
        },
        onCancel: () => {
          console.log('用户取消支付');
          PaymentApi.cancelPaymentOrder(data.orderId);
        }
      };


      if (!data.success) {
        setTimeout(() => {
          uni.showToast({
            title: data.errmsg || '创建订单失败',
            icon: 'none'
          });
        }, 200)
        return;
      }

      await PaymentUtil.initiatePayment(data.payinfo, callbacks);

    }finally{
      uni.hideLoading()
    }
   

    if(!data.success) {
       uni.showToast({
        title: data.errmsg,
        icon: 'none'
      })
      return
    }






}

const submitCheck = () => {
  if (!isAgreed.value) {
    uni.showToast({
      title: '请先同意购买协议',
      icon: 'none'
    })
    return false;
  }
  if (!plotId.value || plotId.value <= 0){
    uni.showToast({
      title: '请先选择小区',
      icon: 'none'
    })
    return false;

  }
  if (!remainingQuota.value || remainingQuota.value === 0){
    uni.showToast({
      title: '当前小区已达限购上限',
      icon: 'none'
    })
    return false;

  }
  if (!remainingQuota.value || remainingQuota.value === 0){
    uni.showToast({
      title: '当前小区已达限购上限',
      icon: 'none'
    })
    return false;

  }

  return true;
}

const handleShare = () => {
  console.log('分享商品')
  // 这里添加分享逻辑
}

const goToPlotSearch = () => {
  // 获取地图组件的经纬度
  const mapComponent = mapRef.value;
  if (mapComponent) {
    // 从地图组件获取当前位置信息
    const latitude = mapComponent.latitude || 31.8206;
    const longitude = mapComponent.longitude || 117.2272;
    const community = currentLocationName.value; // 使用当前显示的小区名称
    
    uni.navigateTo({
      url: `/pages/activity/plot-search?community=${encodeURIComponent(community)}&latitude=${latitude}&longitude=${longitude}`
    });
  } else {
    // 如果地图组件未加载，使用当前显示的小区名称
    const community = currentLocationName.value;
    const latitude = 31.8206;
    const longitude = 117.2272;

    uni.navigateTo({
      url: `/pages/activity/plot-search?community=${encodeURIComponent(community)}&latitude=${latitude}&longitude=${longitude}`
    });
  }
}

// 从搜索页面更新位置信息的方法
const updateLocationFromSearch = async (locationData) => {
  console.log('从搜索页面接收到位置数据:', locationData);
  
  // 更新plotId和areaId等信息
  plotId.value = locationData.plotId || null;
  areaId.value = locationData.areaId || null;
  quota.value = locationData.quota || null;
  quantity.value = locationData.quantity || null;
  
  // 更新地图位置 - 使用与index页面相同的跳转逻辑
  jumpMap(locationData.latitude, locationData.longitude);

  // 更新当前位置名称
  currentLocationName.value = locationData.community;
  
  // 如果从搜索页面返回的数据中没有限额信息，则调用getPlotLimitInfo获取
  if (!locationData.plotId || !locationData.areaId || !locationData.quota || locationData.quota === null) {
    console.log('搜索返回的数据缺少限额信息，调用getPlotLimitInfo获取');
    if (locationData.community && locationData.community !== '附近暂无小区' && locationData.community !== '当前定位附近无小区' && locationData.community !== '') {
      await getPlotLimitInfo(locationData.community);
    }
  } else {
    // 如果有完整的限额信息，直接计算剩余名额
    if (locationData.quota && locationData.quantity) {
      remainingQuota.value = parseInt(locationData.quota) - parseInt(locationData.quantity);
    }
  }
  
  // 显示切换成功提示
  uni.showToast({
    title: `已切换`,
    icon: 'success'
  });
};

// 统一封装「让地图跳到指定点」- 与index页面保持一致
const jumpMap = (lat, lng) => {
  // 支付宝：数据驱动
  console.log('channel', LoginUtils.getChannel());
  if (LoginUtils.getChannel() === 0) {
    // 支付宝：数据驱动
    console.log('支付宝：数据驱动', lat, lng);
    mapCenter.value = { latitude: lat, longitude: lng }
  } else {
    // 微信：继续走 ref
    nextTick(() => {
      if (mapRef.value?.setLocation) {
        mapRef.value.setLocation(lat, lng)
      }
    })
  }
};

// 获取小区限额信息
const getPlotLimitInfo = async (plotName) => {
  try {
    const result = await PileApi.getPlotLimit(plotName);
    if (result && result.quota !== undefined && result.quantity !== undefined) {
      // 存储plotId、areaId、quota和quantity数据
      plotId.value = result.plotId;
      areaId.value = result.areaId;
      quota.value = result.quota;
      quantity.value = result.quantity;
      // 剩余名额 = 限购数量 - 已购数量
      remainingQuota.value = result.quota - result.quantity;
    }
  } catch (error) {
    console.error('获取小区限额信息失败:', error);
  }
};

// 暴露函数给外部调用
defineExpose({
  updateLocationFromSearch
});
</script>

<style scoped>
.product-page {
  /* background-color: #f5f5f5; */
}

/* 轮播图样式 */
.swiper-container {
  height: 300px;
}

.product-swiper {
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 商品信息样式 */
.product-info {
  background-color: #ffffff;
  padding: 20px 20px 0px 20px;
  /* margin-bottom: 10px; */
}

.price-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.price-group {
  display: flex;
  align-items: center;
}

.current-price {
  font-size: 36px;
  /* font-weight: bold; */
  color: #FF6B35;
  margin-right: 8px;
}

.original-price {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
  margin-right: 10px;
}

.discount-tag {
  /* background-color: #FF6B35; */
  border-radius: 2px;
  padding: 2px 6px;
}

.discount-text {
  color: #000000;
  font-size: 14px;
}

.product-name {
  font-size: 20px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8px;
}

.product-desc {
  font-size: 14px;
  color: #666666;
  margin-bottom: 12px;
}

.product-notice {
  background-color: #F5F5F5;
  border-radius: 6px;
  padding: 12px;
}

.notice-text {
  font-size: 13px;
  color: #666666;
  line-height: 18px;
}

/* 免费安装色块样式 */
.free-install-section {
  background: linear-gradient(310deg, #61EDDA 0%, #FFFFC0 100%);
  border-radius: 8px;
  margin: 10px 20px;
  padding: 10px 18px 10px 18px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.install-badge,
.quality-badge,
.speed-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.install-icon,
.quality-icon {
  width: 24px;
  height: 24px;
}

.speed-icon {
  width: 24px;
  height: 29px;
}

.install-text,
.quality-text,
.speed-text {
  font-size: 15px;
  color: #333333;
  font-weight: 500;
}

/* 装维信息样式 */
.install-info-section {
  background-color: #ffffff;
  margin: 10px 20px;
  border-radius: 8px;
  padding: 15px;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F5F5F5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.info-label {
  font-size: 14px;
  color: #333333;
  min-width: 40px;
}

.info-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.info-options {
  display: flex;
  gap: 8px;
}

.option-btn {
  background: #1CCCB4;
  border-radius: 4px;
  padding: 4px 2px 4px 2px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  border: none;
}

.option-btn.active {
  background: #ff6b35;
}

.option-text {
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin: 0 6px 0 12px;
  /* margin-left: 12px; */
  /* margin-right: 6px; */
}

.option-inner {
  background: white;
  border-radius: 4px;
  padding: 2px 6px;
}

.option-inner-text {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
}

/* 权益介绍样式 */
.benefits-section {
  position: relative;
  /* margin: 10px 20px; */
  /* border-radius: 8px; */
  overflow: hidden;
}

.benefits-bg {
  width: 100%;
  height: 450px;
}

.benefits-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

.benefit-title {
  text-align: center;
  margin-bottom: 20px;
}

.benefit-main-title {
  font-size: 16px;
  color: #4A4A4C;
  line-height: 30px;
  display: block;
  opacity: 0.9;

}

.title-image {
  width: 200px;
  height: 40px;
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.benefit-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #C2DAD7;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-right: 8px; */
  flex-shrink: 0;
}

.number-text {
  font-weight: normal;
  font-size: 13px;
  color: #FFFEFE;
  line-height: 15px;
  font-weight: bold;
}

.benefit-text {
  font-size: 14px;
  color: #333333;
  flex: 1;
}

/* 底部说明文字 */
.bottom-notice-wrapper {
  background-color: rgba(239, 239, 239, 1);
  height: 28px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.bottom-notice-text {
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTiR;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 17px;
}

/* 底部间距 */
.location-section {
  margin: 20px 16px 50px 16px;
}

.location-title {
  margin-bottom: 15px;
}

.location-title-text {
  font-size: 16px;
  color: #111111; 
  font-weight: 500;
}

.location-content {
 
}

.location-info {
  border-radius: 10px;
  /* background-image: url('@/static/images/activity_pile/28981756099255_.pic.png'); */
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}

.location-icon {
  width: 35px;
  height: 42px;
  margin: 0 84px 0 82px;
}

.map-component {
  width: 100%;
  height: 180px;
  border-radius: 10px;
}

.location-text-wrapper {
  background-color: rgba(221, 240, 246, 1);
  border-radius: 10px;
  margin-bottom: 8px;
  position: absolute;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  /* z-index: 10; */
  width: max-content;
  padding: 0 5px;
}

.location-text {
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 12px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 20px;
  margin: -1px 9px 1px 9px;
  /* width: max-content; */
}

.location-action {
  margin-top: 10px;
  padding: 0 20px;
}

.location-link-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.location-limit {
  font-size: 14px;
  color: #4A4A4C;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 80rpx;
}

.location-right {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  flex-shrink: 0;
}

.location-link {
  font-size: 14px;
  color: #00C896;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.location-arrow {
  width: 16px;
  height: 16px;
}

.bottom-spacer {
  height: 80px;
}

/* 购买协议 */
.agreement-section {
  background-color: #ffffff;
  padding: 0px 0 20px 0;
  margin-left: 15px;
  /*margin-right: 10px;*/

}

/* uni-data-checkbox 样式 */
.agreement-checkbox {

  display: flex;
  align-items: center;
}

.agreement-checkbox checkbox {
  transform: scale(0.8);
}

.agreement-text {
  font-size: 15px;
  color: #666666;
}

.agreement-link {
  font-size: 15px;
  color: #1CCCB4;
}

/* 底部确认购买按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 15px 0px;
  border-top: 1px solid #f0f0f0;
}

.confirm-button {
  background-color: #00d4aa;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 20px;
}

.confirm-button.disabled {
  background-color: #cccccc;
}

.confirm-text {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}
</style>